import { history } from "umi";
import { useModel } from "umi";
import { useEffect } from "react";
import { Card, Tree, Table, Breadcrumb, Typography, Flex, Input, Space } from "antd";
import { TableOutlined, PicLeftOutlined, PictureOutlined, FolderAddOutlined, ReloadOutlined } from "@ant-design/icons";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { Icon } from "@fluentui/react/lib/Icon";
import { getFileTypeIconProps } from "@fluentui/react-file-type-icons";
import { Allotment } from "allotment";
import "./all.css";

import { Menu, Item, Separator, Submenu, useContextMenu } from "react-contexify";
import "react-contexify/ReactContexify.css";

import DocumentPingListItem from "../../components/document/PingListItem";
import DocumentIconListItem from "../../components/document/IconListItem";
import { useReactive } from "ahooks";

const { DirectoryTree } = Tree;
const { Column } = Table;
const { Text } = Typography;
const { Search } = Input;

const MENU_ID = "blahblah";

const treeData = [
    {
        title: "parent 0",
        key: "0-0",
        children: [
            { title: "leaf 0-0", key: "0-0-0", isLeaf: false },
            { title: "leaf 0-1", key: "0-0-1", isLeaf: false },
        ],
    },
    {
        title: "parent 1",
        key: "0-1",
        children: [
            { title: "leaf 1-0", key: "0-1-0", isLeaf: false },
            { title: "leaf 1-1", key: "0-1-1", isLeaf: false },
        ],
    },
];

const DocCenterAllPage = () => {
    const { windowInnerHeight } = useModel("global");

    const state = useReactive({
        listType: "table",
    });

    const onSearch = (value, _e, info) => console.log(info?.source, value);

    const cardBodyHeight = windowInnerHeight - 90 - 58 - 20;

    const cardTitle = (
        <div>
            <Breadcrumb items={[{ title: "首页" }, { title: <a>一级目录</a> }, { title: <a>二级目录</a> }, { title: "当前目录" }]} />
        </div>
    );

    const cardExtra = (
        <Space>
            <Search placeholder="请输入" allowClear onSearch={onSearch} style={{ width: 200 }} />
            <ButtonGroup>
                <Button icon={<TableOutlined />} onClick={() => (state.listType = "table")}>
                    详情列表
                </Button>
                <Button icon={<PicLeftOutlined />} onClick={() => (state.listType = "ping-list")}>
                    平铺
                </Button>
                <Button icon={<PictureOutlined />} onClick={() => (state.listType = "icon-list")}>
                    大图标
                </Button>
            </ButtonGroup>
        </Space>
    );

    const onSelect = (keys, info) => {
        // console.log("Trigger Select", keys, info);
    };

    const onExpand = (keys, info) => {
        console.log("Trigger Expand", keys, info);
    };

    const { show } = useContextMenu({
        id: MENU_ID,
    });

    function handleContextMenu(event, node) {
        console.log(node);
        show({
            event,
            props: node,
        });
    }

    // I'm using a single event handler for all items
    // but you don't have too :)
    const handleItemClick = ({ id, event, props }) => {
        switch (id) {
            case "copy":
                console.log(event, props);
                break;
            case "cut":
                console.log(event, props);
                break;
            //etc...
        }
    };

    return (
        <Card title={cardTitle} extra={cardExtra} style={{ margin: 10 }} styles={{ body: { height: cardBodyHeight, padding: "1px 0 0 0", overflow: "auto" } }}>
            <Allotment defaultSizes={[100, 400]}>
                <Allotment.Pane minSize={200} maxSize={600}>
                    <div style={{ overflow: "auto", height: cardBodyHeight, padding: 1 }}>
                        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
                            <div
                                className="flex-box"
                                style={{ height: 38, lineHeight: "38px", backgroundColor: "#fafafa", borderBottom: "1px solid #f0f0f0", padding: "0 3px 0 10px" }}
                            >
                                <div>目录</div>
                                <div style={{ paddingTop: 2 }}>
                                    <ButtonGroup>
                                        <Button icon={<FolderAddOutlined style={{ fontSize: 18 }} />} />
                                        <Button icon={<ReloadOutlined />} />
                                    </ButtonGroup>
                                </div>
                            </div>
                            <div style={{ flex: 1 }}>
                                <DirectoryTree
                                    multiple
                                    defaultExpandAll
                                    expandAction={false}
                                    onSelect={onSelect}
                                    onExpand={onExpand}
                                    treeData={treeData}
                                    // onRightClick={({ event, node }) => console.log(node)}
                                    titleRender={(node) => <span onContextMenu={(event) => handleContextMenu(event, node)}>{node.title}</span>}
                                />
                                <Menu id={MENU_ID}>
                                    <Item id="copy" onClick={handleItemClick}>
                                        Copy
                                    </Item>
                                    <Item id="cut" onClick={handleItemClick}>
                                        Cut
                                    </Item>
                                    <Separator />
                                    <Item disabled>Disabled</Item>
                                    <Separator />
                                    <Submenu label="Foobar">
                                        <Item id="reload" onClick={handleItemClick}>
                                            Reload
                                        </Item>
                                        <Item id="something" onClick={handleItemClick}>
                                            Do something else
                                        </Item>
                                    </Submenu>
                                </Menu>
                            </div>
                        </div>
                    </div>
                </Allotment.Pane>
                <Allotment.Pane>
                    <div style={{ overflow: "auto", height: cardBodyHeight, padding: 0 }}>
                        {state.listType === "table" && <DocumentTable />}
                        {state.listType === "ping-list" && <DocumentPingList />}
                        {state.listType === "icon-list" && <DocumentIconList />}
                    </div>
                </Allotment.Pane>
            </Allotment>
        </Card>
    );
};

const tableData = [
    { name: "中国.pdf", modifiedTime: 1233, type: "a", mark: "sdfsadf", size: 123 },
    { name: "asdfawefafeasd.pdf", modifiedTime: 1234, type: "b", mark: "sdfsadf", size: 1443 },
];

const DocumentTable = () => {
    return (
        <Table dataSource={tableData} size="small" rowKey={"name"} pagination={false} scroll={{ y: 300 }}>
            <Column
                title="名称"
                dataIndex={"name"}
                sorter={{ compare: (a, b) => (a.name === b.name ? 0 : a.name > b.name ? 1 : -1) }}
                render={(_, r, i) => (
                    <Space>
                        <Icon {...getFileTypeIconProps({ extension: "docx", size: 24 })} />
                        <span>{_}</span>
                    </Space>
                )}
            />
            <Column
                title="修改日期"
                dataIndex={"modifiedTime"}
                sorter={{ compare: (a, b) => a.modifiledTime - b.modifiledTime }}
                width={140}
                render={(_, r, i) => "2024-02-02 02:02"}
            />
            <Column title="类型" dataIndex={"type"} sorter={{ compare: (a, b) => (a.type === b.type ? 0 : a.type > b.type ? 1 : -1) }} width={160} />
            <Column title="大小" dataIndex={"size"} sorter={{ compare: (a, b) => a.size - b.size }} width={100} />
            {/* <Column title="创建日期" sorter={{ compare: (a, b) => a.name - b.name }} /> */}
            <Column
                title="标记"
                dataIndex={"mark"}
                width={200}
                render={(_, r, i) => (
                    <Text
                        editable={{
                            onChange: console.log,
                            triggerType: ["icon", "text"],
                        }}
                    >
                        {_}
                    </Text>
                )}
            />
        </Table>
    );
};

const DocumentPingList = () => {
    return (
        <div style={{ padding: "10px 0 0 20px" }}>
            <Flex wrap="wrap" gap="small">
                {Array.from({ length: 5 }, (_, i) => (
                    <DocumentPingListItem />
                ))}
            </Flex>
        </div>
    );
};

const DocumentIconList = () => {
    return (
        <div style={{ padding: "10px 0 0 20px" }}>
            <Flex wrap="wrap" gap="small">
                {Array.from({ length: 15 }, (_, i) => (
                    <DocumentIconListItem />
                ))}
            </Flex>
        </div>
    );
};

export default DocCenterAllPage;
